<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<script src="jquerys.js">  </script>
	<title>Document</title>
</head>
	<style>
		div{
			width: 300px;
			margin: 10px auto;
		}
	</style>
	<body>
		<div>
			<!--action:设置表单提交之后的跳转路径,默认的请求是get
				get请求:请求数据保存在请求行中,即在网址栏中,路径后面直接跟随请求数据
					结构:/路径?name=value&&name=value;
					请求头 请求行 空行 请求体
				post:请求数据保存在请求体中
			-->
			<!--使用form表单提交的请求,页面自动跳转至其他页面-->
		<form action="index.html" method="post" enctype="application/x-www-form-urlencoded"><br /><br /><br />
			<input type="text" name="username" id="username" value="" placeholder="请输入用户名"/><br /><br />
			<input type="password" name="paddword" id="paddword" value="" placeholder="请输入密码" /><br /><br />
			<button type="submit"> 提交 </button>
		</form>
	</div>
</body>
<script>
//	AJAX:Asynchronous  javascript and xml
	//异步的js与xml
	//在不更新页面的情况下更新页面数据
	$('form').submit(function(ev){
		//阻止默认事件的发生
		ev.preventDefault();
		console.log('已经阻止; ')
		//获取表单数据,自动将其转化成字符串列化对
		var data = $(this).serialize();
//		$.post({
//			url:'index.html', //请求路径,
//			data:data,		//请求数据
//			success:function(resdata){ //请求成功的回调函数
//				//服务器返回的数据
//				
//			}
//		})
		$.post('index.html',data,function(resdata){
			
		})
	})
</script>
</html>